<script>
import TopNavbar from "@/components/common/TopNavbar.vue";
import LeftMenu from "@/components/common/LeftMenu.vue";
import Breadcrumb from "@/components/common/Breadcrumb.vue";
import { adminMenuItems } from "@/api/comman/menuData.js";
import SignUpApproval from "@/components/admin/SignUpApproval.vue";
import UserManagement from "@/components/admin/UserManagement.vue";

export default {
  name: "adminView",
  components: {UserManagement, SignUpApproval, Breadcrumb, LeftMenu, TopNavbar},
  data() {
    return {
      menuItems: adminMenuItems,
      selectedItem: ['2'],
      menuIndexTitleMap: {}, // 新增一个变量用于存储索引对应的标题
    }
  },
  methods: {
    handleMenuChange(newVal) {
      this.selectedItem = newVal;
      this.buildMenuIndexTitleMap(); // 更新索引对应标题的 map
    },
    buildMenuIndexTitleMap() {
      this.menuIndexTitleMap = {}; // 清空 map
      // 通过遍历 menuItems 构建索引对应标题的 map
      this.selectedItem.forEach((index) => {
        const menuItem = this.menuItems.find((item) => item.index === index);
        if (menuItem) {
          this.menuIndexTitleMap[index] = menuItem.title;
        }
      });
      console.log(this.menuIndexTitleMap);
    },
    shouldShowFeature(featureName) {
      // 通用的判断逻辑
      const lastValue = Object.values(this.menuIndexTitleMap).slice(-1)[0];
      return lastValue === featureName;
    },
  },
  created() {
    // 初始化时构建一次索引对应标题的 map
    this.buildMenuIndexTitleMap();
  },
  computed: {
    shouldShowSignUpApproval() {
      // 调用通用的判断逻辑方法，传递特定条件
      return this.shouldShowFeature('报名审核');
    },

    shouldShowUserManagement() {
      // 调用通用的判断逻辑方法，传递特定条件
      return this.shouldShowFeature('用户管理');
    },
  },
}
</script>

<template>
  <div id="app">
    <header class="header">
      <TopNavbar />
    </header>
    <main class="main">
      <div class="main-left-menu">
        <LeftMenu :menu-items="menuItems" @select="handleMenuChange" />
      </div>
      <div class="main-right-menu">
        <div class="main-right-breadcrumb">
          <Breadcrumb :option="menuIndexTitleMap" />
        </div>
        <div class="main-right-feature">
          <SignUpApproval v-if="shouldShowSignUpApproval"/>
          <UserManagement v-if="shouldShowUserManagement"/>
        </div>
      </div>
    </main>
  </div>
</template>

<style scoped>
  #app {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100%;
    background-color: rgb(247, 249, 252);
    background-size: cover;
  }
  .header {
    margin: 0;
    padding: 0;
    position: relative;
    height: 9%;
    width: 100%;
  }
  .main {
    display: flex;
    margin: 0;
    padding: 0;
    position: relative;
    height: 91%;
    width: 100%;
  }
  .main-left-menu {
    margin: 0;
    padding: 0;
    position: relative;
    height: 100%;
    width: 14%;
  }
  .main-right-menu {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    position: relative;
    height: 100%;
    width: 96%;
  }
  .main-right-breadcrumb {
    padding: 0;
    position: relative;
    height: 10%;
    width: 100%;
  }
  .main-right-feature {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1% 0 0 2%;
    padding: 0;
    position: relative;
    height: 85%;
    width: 96%;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  }
</style>